<template>
    <view class="page__bd">
        <view class="hb-bar bg-white margin-top">
            <view class="action">
                <text class="hb-icon_title text-orange "></text> 普通窗口
            </view>
            <view class="action">
                <button class="hb-btn hb-btn_success shadow" @tap="showModal" data-target="Modal">Modal</button>
            </view>
        </view>
        <view class="hb-modal" :class="modalName=='Modal'?'show':''">
            <view class="hb-dialog">
                <view class="hb-bar bg-white justify-end">
                    <view class="content">Modal标题</view>
                    <view class="action" @tap="hideModal">
                        <text class="hb-icon_close text-red"></text>
                    </view>
                </view>
                <view class="padding-xl">
                    Modal 内容。
                </view>
            </view>
        </view>

        <view class="hb-bar bg-white margin-top">
            <view class="action">
                <text class="hb-icon_title text-orange "></text> 对话窗口
            </view>
            <view class="action">
                <button class="hb-btn hb-btn_success shadow" @tap="showModal" data-target="DialogModal1">Dialog</button>
                <button class="hb-btn hb-btn_primary shadow margin-left" @tap="showModal" data-target="DialogModal2">Dialog</button>
            </view>
        </view>
        <view class="hb-modal" :class="modalName=='DialogModal1'?'show':''">
            <view class="hb-dialog">
                <view class="hb-bar bg-white justify-end">
                    <view class="content">Modal标题</view>
                    <view class="action" @tap="hideModal">
                        <text class="hb-icon_close text-red"></text>
                    </view>
                </view>
                <view class="padding-xl">
                    Modal 内容。
                </view>
                <view class="hb-bar bg-white justify-end">
                    <view class="action">
                        <button class="hb-btn text-green" @tap="hideModal">取消</button>
                        <button class="hb-btn hb-btn_success margin-left" @tap="hideModal">确定</button>

                    </view>
                </view>
            </view>
        </view>

        <view class="hb-modal" :class="modalName=='DialogModal2'?'show':''">
            <view class="hb-dialog">
                <view class="hb-bar bg-white justify-end">
                    <view class="content">Modal标题</view>
                    <view class="action" @tap="hideModal">
                        <text class="hb-icon_close text-red"></text>
                    </view>
                </view>
                <view class="padding-xl">
                    Modal 内容。
                </view>
                <view class="hb-bar bg-white">
                    <view class="action margin-0 flex-sub text-green " @tap="hideModal">
                        微信支付</view>
                    <view class="action margin-0 flex-sub text-green solid-left" @tap="hideModal">取消</view>
                    <view class="action margin-0 flex-sub  solid-left" @tap="hideModal">确定</view>
                </view>
            </view>
        </view>

        <view class="hb-bar bg-white margin-top">
            <view class="action">
                <text class="hb-icon_title text-orange "></text> 图片窗口
            </view>
            <view class="action">
                <button class="hb-btn hb-btn_success shadow" @tap="showModal" data-target="Image">Image</button>
            </view>
        </view>

        <view class="hb-modal" :class="modalName=='Image'?'show':''">
            <view class="hb-dialog">
                <view class="bg-img" style="background-image: url('http://5b0988e595225.cdn.sohucs.com/images/20200103/0ff3880f4f9442b0b3b461ccdb4bcc85.jpeg');height:200px;">
                    <view class="hb-bar justify-end text-white">
                        <view class="action" @tap="hideModal">
                            <text class="hb-icon_close "></text>
                        </view>
                    </view>
                </view>
                <view class="hb-bar bg-white">
                    <view class="action margin-0 flex-sub  solid-left" @tap="hideModal">我知道了</view>
                </view>
            </view>
        </view>


        <view class="hb-bar bg-white margin-top">
            <view class="action">
                <text class="hb-icon_title text-orange "></text> 单选窗口
            </view>
            <view class="action">
                <button class="hb-btn hb-btn_success shadow" @tap="showModal" data-target="RadioModal">Radio</button>
            </view>
        </view>

        <view class="hb-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
            <view class="hb-dialog" @tap.stop="">
                <radio-group class="block" @change="RadioChange">
                    <view class="hb-list menu text-left">
                        <view class="hb-list__item" v-for="(item,index) in 5" :key="index">
                            <label class="flex justify-between align-center flex-sub">
                                <view class="flex-sub">Item {{index +1}}</view>
                                <radio class="round" :class="radio=='radio' + index?'checked':''" :checked="radio=='radio' + index?true:false"
                                    :value="'radio' + index"></radio>
                            </label>
                        </view>
                    </view>
                </radio-group>
            </view>
        </view>

        <view class="hb-bar bg-white margin-top">
            <view class="action">
                <text class="hb-icon_title text-orange "></text> 多选窗口
            </view>
            <view class="action">
                <button class="hb-btn hb-btn_success shadow" @tap="showModal" data-target="ChooseModal">Choose</button>
            </view>
        </view>
        <view class="hb-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
            <view class="hb-dialog" @tap.stop="">
                <view class="hb-bar bg-white">
                    <view class="action text-blue" @tap="hideModal">取消</view>
                    <view class="action text-green" @tap="hideModal">确定</view>
                </view>
                <view class="grid col-3 padding-sm">
                    <view v-for="(item,index) in checkbox" class="padding-xs" :key="index">
                        <button class="hb-btn orange lg block" :class="item.checked?'hb-btn_warning':'line-orange'" @tap="ChooseCheckbox"
                            :data-value="item.value"> {{item.name}}
                            <view class="hb-tag sm round" :class="item.checked?'bg-white text-orange':'bg-orange'" v-if="item.hot">HOT</view>
                        </button>
                    </view>
                </view>
            </view>
        </view>

        <view class="hb-bar bg-white margin-top">
            <view class="action">
                <text class="hb-icon_title text-orange "></text> 侧边抽屉
            </view>
            <view class="action">
                <button class="hb-btn hb-btn_success shadow" @tap="showModal" data-target="DrawerModalL">Left</button>
                <button class="hb-btn hb-btn_primary shadow margin-left" @tap="showModal" data-target="DrawerModalR">Right</button>
            </view>
        </view>
        <view class="hb-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
            <view class="hb-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
                <view class="hb-list menu text-left">
                    <view class="hb-list__item arrow" v-for="(item,index) in 5" :key="index">
                        <view class="content">
                            <view>Item {{index +1}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="hb-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''" @tap="hideModal">
            <view class="hb-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
                <view class="hb-list menu text-left">
                    <view class="hb-list__item arrow" v-for="(item,index) in 5" :key="index">
                        <view class="content">
                            <view>Item {{index +1}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                modalName: null,
                radio: 'radio1',
                checkbox: [{
                    value: 0,
                    name: '10元',
                    checked: false,
                    hot: false,
                }, {
                    value: 1,
                    name: '20元',
                    checked: true,
                    hot: false,
                }, {
                    value: 2,
                    name: '30元',
                    checked: true,
                    hot: true,
                }, {
                    value: 3,
                    name: '60元',
                    checked: false,
                    hot: true,
                }, {
                    value: 4,
                    name: '80元',
                    checked: false,
                    hot: false,
                }, {
                    value: 5,
                    name: '100元',
                    checked: false,
                    hot: false,
                }]
            }
        },
        methods: {
            showModal(e) {
                this.modalName = e.currentTarget.dataset.target
            },
            hideModal(e) {
                this.modalName = null
            },
            RadioChange(e) {
                this.radio = e.detail.value
            },
            ChooseCheckbox(e) {
                let items = this.checkbox;
                let values = e.currentTarget.dataset.value;
                for (let i = 0, lenI = items.length; i < lenI; ++i) {
                    if (items[i].value == values) {
                        items[i].checked = !items[i].checked;
                        break
                    }
                }
            }
        }
    }
</script>

<style>
</style>
